<script setup lang="ts">
import { reactive } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { routerPage } from './router'
const reactivePage = reactive({
  hasOpen: false
})

const changeRoute = (hasOpen: boolean) => {
  hasOpen ? (reactivePage.hasOpen = false) : (reactivePage.hasOpen = true)
}
</script>

<template>
  <section class="section_page">
    <ul>
      <li v-for="page in routerPage" :key="page.path">
        <ol v-if="page.children && page.children.length > 0">
          <span @click="changeRoute(reactivePage.hasOpen)">{{ page.meta.title }}</span>
          <li v-for="inner in page.children" :key="inner.path" v-show="reactivePage.hasOpen">
            <RouterLink :to="`${page.path}/${inner.path}`">{{ inner.name }}</RouterLink>
          </li>
        </ol>
        <template v-else>
          <RouterLink :to="page.path">{{ page.name }}</RouterLink>
        </template>
      </li>
    </ul>
    <RouterView />
  </section>
</template>

<style lang="scss" scoped>
.section_page {
  display: flex;
  ul {
    height: 100%;
    overflow: scroll;
    ol {
      span {
        cursor: pointer;
        &:hover {
          color: #469f4b;
        }
      }
      li {
        margin-left: 20px;
      }
    }
    li {
      padding: 10px;
      a {
        color: #000;
        text-decoration: underline;
        text-decoration: none;
      }
    }
    .router-link-active {
      color: #469f4b;
      font-weight: bold;
    }
  }
  .router-view {
    height: 100%;
    overflow: scroll;
    padding: 10px;
  }
}
</style>
